<!--  -->
<template>
  <div class="tables-system-item-list">
    <el-row v-loading="systemItemLoading">
      <el-table ref="multipleTable" :data="systemItemList" :height="330" :border="true" style="width: 100%"
        @select="cSelectionChange">
        <el-table-column prop="repertoryQuote" label="图片" width="120" align="center" class="padding0">
          <template slot-scope="scope">
            <div class="scope-image">
              <a :href="imageUrl(scope.row)" target="_blank"
                v-if="scope.row && scope.row.imageFace && scope.row.imageFace.hrepertory">有图片</a>
              <span v-else>没有图片</span>
              <div v-if="scope.row && scope.row.imageFace && scope.row.imageFace.hrepertory" class="img">
                <div class="r-image">
                  <el-image :src="imageUrl(scope.row)" :fit="'contain'"></el-image>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="分类" width="140">
          <template slot-scope="scope">
            <span
              v-if="scope.row.listCategoryQuote && scope.row.listCategoryQuote.length > 0">{{categoryName(scope.row.listCategoryQuote)}}</span>
            <span v-else style="color: #b5b5b5;">{{'未定义'}}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="sproduct.title" label="产品名称">
        </el-table-column>
        <el-table-column type="selection" width="55">
        </el-table-column>
      </el-table>
    </el-row>
    <div style="text-align: right;margin-top:4px;">
      <el-pagination small layout="prev, pager, next" :current-page="page" @current-change="handleCurrentChange"
        :page-size="pageSize" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ImagesEmpty from '@/assets/images/image-empty.png'
import * as functions from '@/core/functions.js'
export default {
  props: {
    systemItemList: {
      type: Array
    },
    systemItemLoading: {
      type: Boolean
    },
    total: {
      type: Number
    },
    pageSize: {
      type: Number
    },
    changePage: {
      type: Function
    },
    page: {
      type: Number
    },
    selectionChange: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  methods: {
    imageUrl (row) {
      if (!row || !row.imageFace || !row.imageFace.hrepertory) {
        return ImagesEmpty
      }
      let src = functions.getRepertoryImageSrcByHostRepertory(row.imageFace.hrepertory)
      return src
    },
    categoryName (list) {
      if (!list || list.length < 1) {
        return ''
      }
      let result = ''
      list.forEach(element => {
        if (!result) {
          result = element.scategories.name
        } else {
          result += '、' + element.scategories.name
        }
      })
      return result
    },
    cSelectionChange (selection, row) {
      // 是选中还是取消
      let index = selection.findIndex(element => {
        return parseInt(element.sproduct.id) === parseInt(row.sproduct.id)
      })
      if (index > -1) {
        // 添加
        this.selectionChange(row, true)
      } else {
        // 减少
        this.selectionChange(row, false)
      }
    },
    tableSelection (rows) {
      if (rows) {
        this.$refs.multipleTable.clearSelection()
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleCurrentChange (page) {
      this.changePage(page)
    }
  }
}

</script>

<style scoped lang="scss">
.tables-system-item-list {
  margin-top: 10px;

  .img {
    display: none;
    position: absolute;
    z-index: 1999;
    width: 0px;

    .r-image {
      position: relative;
      left: 110px;
      top: -36px;
      width: 120px;
    }
  }
  /deep/ tbody tr:nth-last-child(1) .img, /deep/ tbody tr:nth-last-child(2) .img, /deep/ tbody tr:nth-last-child(3) .img{
    bottom:0;
    .r-image {
      position: absolute;
      top: auto;
      bottom: 0;
    }
  }
  /deep/ tbody tr:nth-child(1) .img, /deep/ tbody tr:nth-child(2) .img, /deep/ tbody tr:nth-child(3) .img{
    bottom: auto;
    .r-image {
      position: relative;
      top: -36px;
      bottom: auto;
    }
  }

  /deep/ thead .el-table-column--selection .cell .el-checkbox {
    span{
      display: none;
    }
    &:before{
      content: "操作  ";
    }
  }
}

.scope-image:hover .img {
  display: inherit;
}
</style>
